<template>
  <view>
   <view class="my-serch-container" @tap="goSearch">
     <view class="my-search-box"  style="border-radius: 15px;">
       <!-- 使用uni-ui提供的图标组件 -->
       <uni-icons type="search" size="18"></uni-icons>
       <text class="placeholder">搜索</text>
     </view>
   </view>
    <!-- 轮播图 -->
    <view class="top-swiper">
      <swiper class="swiper" :previous-margin="swiper.margin" :current="swiper.index" :next-margin='swiper.margin'
        :circular="true" @change="swiperChange">
        <swiper-item v-for="(item,index) in swiper.data" :key="index">
          <image class='le-img' :src="item.wordBookCover" :class="{'le-active':swiper.index == index}">
          </image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 单词面板 -->
    <view v-show="swiper.book">
      <view class="panel-words">
        <!-- v-show="swiper.book.wordBookName===undefined?0:1" -->
        <p class="Word-book-title">{{swiper.book.wordBookName}}常用单词</p>
        <p class="learning-pace">

          <span>{{percentage}}%</span>
          <span>已学{{swiper.book.learnedWords}}个单词，共{{swiper.book.totalWords}}个单词</span>
        </p>
        <view class="progress">
          <van-progress :percentage="percentage" :show-pivot="false" />
        </view>
      </view>
      <view class="study-time-whith">
        <van-row class="study-time">
          <van-col span="12">
            <p>{{swiper.book.learnedToday}}个</p>
            <p>今日已学</p>
          </van-col>
          <van-col span="12">
            <p>{{swiper.book.cumulativeLearningDays}}天</p>
            <p>累计学习</p>
          </van-col>
        </van-row>
      </view>

    </view>
    <view class="but">
      <van-button color="#39a9ed" size="large" round @click="GoStartLearning" >开始学习</van-button>
    </view>
  </view>
</template>

<script>
  export default {
    computed: {
     // 计算进度的百分比
      percentage() {
        if (this.swiper.book === null) return 0
        let num = Math.floor((this.swiper.book.learnedWords / this.swiper.book.totalWords) * 100)
        if (!num) return 0
        return num
      }
    },
    data() {
      return {
        swiper: {
          margin: "100rpx",
          index: 0,
          // 所有单词本数据
          data: null,
          // 当前单词本数据
          book: null,
          // 所有单词本id
         bookIds:[]
        },
       
      };
    },
   
    methods: {
      goSearch() {
        
        uni.navigateTo({
          url: '/subpkg/search/search?bookIds='+JSON.stringify(this.bookIds)
        });
      },
      //swiper滑动事件
      swiperChange: function(e) {
        this.swiper.index = e.detail.current;
      },
      // 获取单词本数据
      async getwordBook() {
        // let data = {
        //   wordBookName: 11,
        //   wordBookCover: 0,
        //   learnedToday: 0,
        //   cumulativeLearningDays: 0,
        //   learnedWords: 0,
        //   totalWords: 0,
        //   collection: 0,
        //   // dept_id:1 
        // }
        // learnedWords 已学单词
        // totalWords 总共单词
        const res = await uni.$myRequest('/home/wordBook/wordBook', 'GET')
        
        this.swiper.data = res.data.data
        // 赋值当前单词本数据
        this.swiper.book = this.swiper.data[0]
        let arr=[]
        res.data.data.forEach(e=>{
          arr.push(e.id)
        })
        this.bookIds=arr
        console.log(this.swiper.book,1232321321)
        console.log(this.swiper.data, 6)
        console.log(this.bookIds, 6)
      },
      GoStartLearning(){
        uni.navigateTo({
           url: '/subpkg/startLearning/startLearning?id='+this.swiper.book.id
        })
      }
    },
    watch: {
      // 侦听滑动变值
      'swiper.index': {
        deep: true,
        handler: function(newV, oldV) {
          // 赋值变化后的单词本数据
          this.swiper.book = this.swiper.data[this.swiper.index]
        }
      }
    },

    onLoad() {
      // 获取单词本数据
      this.getwordBook()
    }
  }
</script>

<style lang="scss">
  body,
  html {
    background-color: #f7f8fa;
  }
 .my-serch-container {
    display: flex;
    align-items: center;
    padding: 0 10px 4px 10px;
    background-color: #39a9ed;

    .my-search-box {
      height: 28px;
      background-color: #FFFFFF;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .placeholder {
        font-size: 15px;
        margin-left: 5px;
      }

    }
  }
  .top-swiper {
    margin-top: 15rpx;

    .swiper {
      height: 320rpx;

      .le-img {
        width: 98%;
        height: 98%;
        margin: auto;
        display: block;
        transform: scale(0.9);
        transition: transform 0.3s ease-in-out 0s;
        border-radius: 4px;
        box-shadow: 0 0 20px 0.5px #dbe0e0;

        &.le-active {
          transform: scale(1);

        }
      }

    }
  }

  .panel-words {
    height: 333rpx;
    width: 92%;
    background-image: linear-gradient(to right, #39a9ed, #91dada);
    margin: auto;
    margin-top: 15rpx;
    border-radius: 8px 8px 0px 0px;

    .Word-book-title {
      padding-top: 20rpx;
      margin-left: 10rpx;
      font-weight: 700;
      color: whitesmoke;
    }

    .learning-pace {
      margin-top: 160rpx;
      display: flex;
      justify-content: space-between;
      color: white;

      span {
        padding: 0 10rpx;
      }
    }

    .progress {
      margin: 0 10rpx;
      margin-top: 25rpx;
    }
  }

  .study-time {
    margin-left: 20rpx;
    text-align: center;
    line-height: 50rpx;



    p:nth-child(1) {
      font-weight: 700;
    }

    p:nth-child(2) {
      font-size: 12px;
      color: #b4b0b0;
    }
  }

  .but {
    position: fixed;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;

    van-button {
      width: 70%;
    }
  }

  .study-time-whith {
    width: 92%;
    height: 198rpx;
    margin: auto;
    background-color: white;
    position: relative;
    box-shadow: 0px 3px 5px 1px #e4e5e5;
  }

  .study-time-whith::after {
    position: absolute;
    content: "";
    display: block;
    width: 1rpx;
    height: 120rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f7f8fa;
  }
</style>
